<!-- 组件 -->
<template>
  <div>
    <div style="color: #000;">选择您所在的地区:</div>
    <div class="city-select">
      <select v-model="oneLevelVlaue">
        <option v-for="(item, index) in oneLevelList" :key="index" :value="item">{{ item }}</option>
      </select>
      <select v-model="twoLevelVlaue">
        <option v-for="(item, index) in twoLevelList" :key="index" :value="item">{{ item }}</option>
      </select>
      <select v-model="threeLevelVlaue">
        <option v-for="(item, index) in threeLevelList" :key="index" :value="item">{{ item }}</option>
      </select>
    </div>
    <div class="city-select-button">
      <div @click="saveClick" class="option-save">确定</div>
      <div @click="cancelClick" class="option-cancel">取消</div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    city: {
      type: Array,
      default() {
        return ['北京', '北京', '北京'];
      },
    },
  },
  data() {
    return {
      num: 2,
      oneLevelVlaue: '',
      twoLevelVlaue: '',
      threeLevelVlaue: '',
      oneLevelList: [],
      twoLevelList: [],
      threeLevelList: [],
    };
  },
  mounted() {
    this.getOneLevelList();
    this.oneLevelVlaue = this.city[0];
    this.twoLevelVlaue = this.city[1];
    this.threeLevelVlaue = this.city[2];
  },
  components: {},
  watch: {
    oneLevelVlaue() {
      this.getTwoLevelList();
    },
    twoLevelVlaue() {
      this.getThreeLevelList();
    },
    threeLevelVlaue() {},
  },
  methods: {
    /**
     * 事件
     */
    saveClick() {
      let code = this.db('WeatherCityCode')
        .get(this.oneLevelVlaue)
        .get(this.twoLevelVlaue)
        .get(this.threeLevelVlaue)
        .value().AREAID;
      this.$emit('citySelectResult', {
        province: this.oneLevelVlaue,
        city: this.twoLevelVlaue,
        county: this.threeLevelVlaue,
        code,
      });
    },
    cancelClick() {
      this.$emit('citySelectResult', null);
    },
    /**
     * 获取数据
     */
    getOneLevelList() {
      let data = this.db('WeatherCityCode').value();
      this.oneLevelList = Object.keys(data);
    },
    getTwoLevelList() {
      let data = this.db('WeatherCityCode')
        .get(this.oneLevelVlaue)
        .value();
      this.twoLevelList = Object.keys(data);
      this.num ? this.num-- : (this.twoLevelVlaue = this.twoLevelList[0]);
    },
    getThreeLevelList() {
      let data = this.db('WeatherCityCode')
        .get(this.oneLevelVlaue)
        .get(this.twoLevelVlaue)
        .value();
      this.threeLevelList = Object.keys(data);
      this.num ? this.num-- : (this.threeLevelVlaue = this.threeLevelList[0]);
    },
  },
};
</script>

<style scoped>
.city-select {
  display: flex;
  justify-content: space-between;
}
.city-select select {
  outline: none;
  border-radius: 4px;
  margin: 10px 0;
  padding: 3px;
}
.city-select-button {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 5px;
}
.option-save,
.option-cancel {
  border-radius: 4px;
  padding: 3px 6px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  margin-left: 16px;
  cursor: default;
}
.option-save {
  color: #fff;
  background: #4e71f2;
}
.option-cancel {
  color: #000;
  background: #eee;
}
</style>
